<template>
  <div class="visit__box" :class="{ 'has-super': info.scanDate }">
    <div class="visit-title">
      <div>
        <span>{{ info.name }}</span>
        <span v-if="info.baseline" class="baseline">(基线)</span>
      </div>
    </div>
    <el-row>
      <el-col :span="14">
        <div>计划时间</div>
        <div class="visit-time">{{ info.planTime }}&nbsp;(±{{ info.winPhase }})</div>
      </el-col>
      <el-col :span="10">
        <div>访视时间<span v-if="info.scanDate" class="super-tag">超窗</span></div>
        <div class="visit-time">{{ info.visitTime }}</div>
      </el-col>
    </el-row>
    <div v-if="info.statusObj" class="check-icon" :style="{ color: info.statusObj?.color }">
      <el-tooltip :content="info.statusObj.value">
        <svg-icon icon-class="submit-wait" />
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'

defineProps({
  info: {
    type: Object,
    default: () => {
      return {
        statusObj: {
          color: 'gray',
          value: '待处理',
        },
      }
    },
  },
  statusData: {
    type: Array,
    default: () => [],
  },
})

defineEmits([])
</script>

<style lang="scss" scoped>
.visit {
  &__box {
    position: relative;
    display: flex;
    padding: 20px 20px;
    line-height: 24px;
    cursor: pointer;
    background: var(--background-color-1);
    border-radius: 2px;
    border-radius: 6px;
    flex-direction: column;
    justify-content: space-between;

    &.has-super {
      border: 2px solid lightcoral;
    }
  }

  &-title {
    height: 40px;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
  }

  &-time {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-2);
  }

  &-item {
    &:hover {
      .visit__box {
        background: var(--card-hover-background);
      }
    }

    &.is-active {
      .visit__box {
        background: var(--card-active-background);
      }
    }
  }
}

.check {
  &-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;

    svg {
      outline: none;
    }
  }
}

.baseline {
  font-size: 16px;
  font-weight: normal;
}
</style>
